import { IRouteComponentProps, SettingModelState, useSelector, useDispatch, ArticleModelState, Loading, Link, RecommendModelState } from "umi";
import styles from './index.less';
import React, { useEffect, useRef, useState } from 'react'
import CommonCommend from '@/components/CommonCommend';
import Articlenav from "@/components/articlenav";
import classNames from "classnames";
import List from "@/components/List";

const PageDetail: React.FC<IRouteComponentProps<{ id: string }>> = ({ match }) => {

  const { article, loading, recommend } = useSelector((state: { article: ArticleModelState, loading: Loading, recommend: RecommendModelState }) => {
    return {
      article: state.article,
      loading: state.loading,
      recommend: state.recommend
    }
  });
  // 通过useDispatch获取dispatch
  const dispatch = useDispatch();
  console.log(recommend, 'recommend...');


  // 获取推荐阅读数据 
  useEffect(() => {
    dispatch({
      type: 'recommend/getRecommend'
    })
  }, [])

  // 关于页面



  // 传入 的 id；
  const id = match.params.id;
  const { pageSetting } = useSelector((state: { setting: SettingModelState }) => state.setting);

  let detail = pageSetting.find(item => item.path === id);


  if (!detail) {
    return null;
  }

  return <div className={styles.about_all}>

    {/* 上部盒子 */}
    <div className={styles.container} >

      {/* 图片盒子 */}
      <div className={styles.banner}>
        {detail.cover && <img src={detail.cover} alt="" />}
        
      </div>

      {/* 描述的盒子 */}
      <div className={styles.dec}>

        {/* 富文本数据渲染 */}
        <div className={styles.word} dangerouslySetInnerHTML={{ __html: detail!.content }}></div>

      </div>

      <div>

        {/* 评论组件引入 并传入相应的id */}
        <CommonCommend id={detail.id} />
      </div>
      {/* 推荐阅读 */}
      <div>

        <div className={styles.suggested}>
          <div className={styles.top}>
            <span>推荐阅读</span>
          </div>
          <div className={styles.cont}>
            <List allData={recommend.RecommendList} />
          </div>
        </div>
      </div>


    </div>

    {/* 下部盒子 */}
    <div className={styles.footer}>

    </div>
  </div>
}

export default PageDetail;
